
<template>
 <div>
   <div class="header">
     <router-link to="/movie" tag="i" class="fa fa-hand-o-left" aria-hidden="true"></router-link>
    
   </div>
   <div class="login">
     <ul class="nav">
       <li v-for="(item, index) in ['美团账号登录', '手机验证登录']" :key="index"
       :class="{'active': index === value}"
       @click="onLine">
          <p>
            {{item}}
          </p>
       </li>
     </ul>
     <div class="meituan_loain" v-if="isShow">
       <form action="" >
         <p>
            <input type="text" placeholder="账户名/手机号/Email" v-model="phoneNumber">
         </p>
         <p>
          <input type="password" placeholder="请输入您的密码" v-model="password">
         </p>
       </form>
       <div class="btn">
        <button @click="loginAsync({phoneNumber, password})">登录</button>
       </div>
       <div class="bottom">
         <router-link to="register">立即注册</router-link>
         <router-link to="/foudPassword">找回密码</router-link>
       </div>
     </div>
     <div class="meituan_loain" v-else>
       <div class="phone">
         <p>
            <input type="number" placeholder="请输入手机号" v-model="phoneNumber1" @input="fn2">
         </p>
         <p>
           <input type="submit" value="发送验证码" @click="fn1(); setYzm()" ref="sendYzm">
         </p>
       </div>
       <p>
          <input type="password" placeholder="请输入短信验证码" v-model="Yzm">
       </p>

       <div class="btn">
          <button @click="yzLogin" ref="yzlogin">登录</button>
       </div>
       <div class="bottom">
         <router-link to="register">立即注册</router-link>
         <router-link to="/foudPassword">找回密码</router-link>
       </div>
     </div>
   </div>
   <p class="footer">
     <span>&copy; 猫眼电影 客服电话：</span>
     <a href="tel:4006705335">400-670-5335</a>
   </p>
 </div>
</template>

<script>
import { mapActions } from 'vuex'
import '../../router/index'
import Vue from 'vue';
import { Dialog } from 'vant';

export default {
  data () {
    return {
      isShow: true,
      value: 0,
      phoneNumber: '',
      password: '',
      phoneNumber1: '',
      yzm: '',
      Yzm: '',
     
    }
  },
  methods: {
    onLine () {
      if (this.value === 0) {
        this.value = 1
        this.isShow = false
      } else {
        this.value = 0
        this.isShow = true
      }
    },
    ...mapActions(['loginAsync']),

    fn1 () { // 获取验证码
      var Phonereg = /^[1][3,4,5,7,8][0-9]{9}$/
      var arr = [] // 创建空数组，放入a~Z 0~9
      var arr2 = []
      if (this.phoneNumber1 && Phonereg.test(this.phoneNumber1)) {
        for (var i = 65; i <= 90; arr.push(i), i++) {} // a~z
        for (var j = 97; j <= 122; arr.push(j), j++) {} // A~Z
        for (var k = 48; k <= 57; arr.push(k), k++) {} // 0~9
        for (var g = 0; g < 4; g++) { // 从0-61之间取随机数
          var index = Math.floor(Math.random() * 62) // 返回 0 至 61 之间的数
          var char = String.fromCharCode(arr[index]) // 转换ASCII码
          arr2.push(char)
        }
        var str1 = arr2.toString() // 数组转换字符串
        var str2 = str1.replace(/,/g, '')
        console.log('验证码：' + str2)
        this.yzm = str2
      } else {
        Dialog({ message: '请输入正确的手机号' });
      }
    },
    fn2 () { // 当输入正确手机号发送按钮改变样式
      var Phonereg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (this.phoneNumber1 && Phonereg.test(this.phoneNumber1)) {
        // this.$refs['sendYzm'].style.color = '#df2d2d'
        this.$refs['sendYzm'].style.cssText = 'border:1px solid #df2d2d;color:#df2d2d;background:#fff;'
      }
    },
    setYzm () { // 存储验证码
      this.$store.commit('setYzm', this.yzm)
    },
    yzLogin () { // 验证登录
      if (this.Yzm === this.yzm) {
        Dialog({ message: '登录成功' });
        window.localStorage.setItem('Yzm', this.Yzm)
        this.$router.replace('my')
        
      }
    }
  }
}
</script>

<style scoped lang="scss">
  body,html{
    height:100%;
  }
  .header{
    height:50px;
    width:100%;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 20px;
    background: #df2d2d;
    color: #fff;
    i{
      display: block;
      width:50px;
      height:50px;
      line-height: 50px;
    }
    h1{
      flex: 1;
    }
  }
  .login{
    width:100%;
    .nav{
      height:35px;
      line-height: 35px;
      border-bottom: 3px solid #d6d6d6;
      display: flex;
      justify-content: space-around;
      li{
        text-align: center;
        p{
          width:150px;
          height: 40px;
        }
      }
    }
    .meituan_loain{
        width: 100%;
        p{
          padding:15px;
          border-bottom:1px solid #d6d6d6;
          input{
            width:100%;
            height:25px;
            border: none;
            font-size: 15px;
            padding-left: 10px;
            border-radius: 4px;
          }
        }
        .btn{
          margin: 10px;
          button{
            width:100%;
            height:30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            background: #df2d2d;
            color:#fff;
            border:none;
            border-radius: 3px;
          }
        }
    }
    .bottom{
      display: flex;
      justify-content: space-around;
      a{
        color:#FE8C00;
      }
    }
  }
  .footer{
    text-align: center;
    margin:15px 0;
  }
  .active{
    border-bottom: 4px solid #FE8C00;
  }
  .phone{
    display: flex;
    // p{
    //   width:100%;
    //   flex: 1;
    //   input{
    //     width:100%;
    //   }
    // }
  }
</style>
